<template>
  <el-dialog :visible.sync="isDetailsShow" width="90%">
    <div class="details-main">
      <h1 class="details-title">
        个人征信授权书查看详情
      </h1>
      <div class="details-content">
        <div class="content-left">
          <h2 class="sub-title">文件信息</h2>
          <div class="pdf-box">
            <pdf :src="fileSrc" v-for="i in numPages" :page="i" :key="i"></pdf>
          </div>
        </div>
        <div class="content-right">
          <h2 class="sub-title">客户信息</h2>
          <div class="info-box">
            <ul class="text-list">
              <li>
                <b>客户姓名：</b>
                <span>{{detailsData.customerName}}</span>
              </li>
              <li>
                <b>身份证号码：</b>
                <span>{{detailsData.idCardNumber}}</span>
              </li>
              <li>
                <b>手机号码：</b>
                <span>{{detailsData.mobile}}</span>
              </li>
              <li>
                <b>家庭住址：</b>
                <span>{{detailsData.cardAddress}}</span>
              </li>
              <li>
                <b>贷款金额：</b>
                <span>{{detailsData.amount}}</span>
              </li>
              <li>
                <b>贷款期限：</b>
                <span>{{detailsData.limit}}</span>
              </li>
              <li>
                <b>贷款利率：</b>
                <span>{{detailsData.rate}}</span>
              </li>
              <li>
                <b>LPR加点：</b>
                <span>{{detailsData.lpr}}</span>
              </li>
              <li>
                <b>客户账户：</b>
                <span>{{detailsData.customerAccount}}</span>
              </li>
              <li>
                <b>受托支付账户名：</b>
                <span>{{detailsData.bankName}}</span>
              </li>
              <li>
                <b>受托支付账户：</b>
                <span>{{detailsData.bankAccount}}</span>
              </li>
            </ul>
            <ul class="idCard-box">
              <li>
                <img src="@/assets/image/noimg.png" v-if="!baseData.cardFrontBaseStr">
                <img :src="`data:image/png;base64,${baseData.cardFrontBaseStr}`" v-if="baseData.cardFrontBaseStr">
              </li>
              <li>
                <img src="@/assets/image/noimg.png" v-if="!baseData.cardBackBaseStr">
                <img :src="`data:image/png;base64,${baseData.cardBackBaseStr}`" v-if="baseData.cardBackBaseStr">
              </li>
              <li>
                <img src="@/assets/image/noimg.png" v-if="!baseData.faceBaseStr">
                <img :src="`data:image/png;base64,${baseData.faceBaseStr}`" v-if="baseData.faceBaseStr">
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-button type="primary" v-if="buttons[$buttonCode.authSuccess]" @click="CheckBtn('203')">审核通过并通知签署人</el-button>
        <el-button type="primary" v-if="buttons[$buttonCode.authFail]" @click="sendBack('201')">撤回签署由录入岗修改</el-button>
        <el-button type="primary" v-if="buttons[$buttonCode.authSign]" @click="CheckBtn('205')">审核通过并银行签章</el-button>
        <el-button type="plain" @click="isDetailsShow = false">返回</el-button>
        <el-button type="plain"  v-if="buttons[$buttonCode.authReturn]"  @click="sendBack('201')">退回修改</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import mixin from '@/mixins/buttons'
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
import { ContractCheck, SendBackContract } from '@/api/contract'
export default {
  mixins: [mixin],
  data () {
    return {
      fileSrc: '',
      numPages: 0,
      isDetailsShow: false,
      detailsData: {},
      baseData: {},
      roleData: {}
    }
  },
  components: {
    pdf
  },
  methods: {
    // 合同渲染
    ShowFile (base) {
      const pdfData = 'data:application/pdf;base64,' + base
      this.fileSrc = pdf.createLoadingTask({ url: pdfData, CMapReaderFactory })
      this.fileSrc.promise.then((pdf) => {
        this.numPages = pdf.numPages
      })
    },
    // 审阅
    CheckBtn (flag) {
      const postData = {
        transId: '07135006', // 交易码
        accessHost: '1111', // mac地址
        cifSeq: '111',
        id: this.detailsData.id,
        flag: Number(flag)
      }
      ContractCheck(postData).then(res => {
        if (res.data.data) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.isDetailsShow = false
          this.$parent.getList()
        } else {
          this.$message({
            type: 'error',
            message: '操作失败'
          })
        }
      })
    },
    //  撤回合同
    sendBack (flag) {
      const postData = {
        transId: '07135007', // 交易码
        accessHost: '1111', // mac地址
        cifSeq: '111',
        id: this.detailsData.id,
        flag: Number(flag)
      }
      SendBackContract(postData).then(res => {
        if (res.data.data) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.isDetailsShow = false
          this.$parent.getList()
        } else {
          this.$message({
            type: 'error',
            message: '操作失败'
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
  /deep/.el-dialog{
    min-width: 1200px;
    .details-main{
      width: 100%;
      .details-title{
        position: relative;
        width: 100%;
        padding: 20px 40px;
        font-size: 18px;
        box-sizing: border-box;
        box-shadow: 1px 1px 2px 1px rgba(0,0,0,.1);
        color: #333;
        margin: 10px 0;
        &:after{
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 10px;
          width: 8px;
          height: 70%;
          background-color: #409eff;
          margin: auto;
        }
      }
      .footer{
        display: flex;
        width: 100%;
        height: auto;
        padding: 20px 0;
        font-size: 18px;
        box-sizing: border-box;
        background-color: #eee;
        box-shadow: 1px 1px 2px 1px rgba(0,0,0,.1);
        color: #333;
        margin: 10px 0;
        justify-content: center;
        .el-button{
          width: 200px;
          height:45px;
        }
      }
      .details-content{
        display: flex;
        width: 100%;
        .sub-title{
          font-size: 16px;
          padding: 15px;
          box-sizing: border-box;
          border-bottom: 1px solid #ccc;
          background-color: #fafafa;
        }
        .content-left{
          width: 40%;
          box-shadow: 1px 1px 2px 1px rgba(0,0,0,.1);
          .pdf-box{
            width: 100%;
            height: 800px;
            overflow-y: auto;
          }
        }
        .content-right{
          width: 60%;
          box-shadow: 1px 1px 2px 1px rgba(0,0,0,.1);
          margin-left: 10px;
          .info-box{
            display: flex;
            width: 100%;
            height: 900px;
            padding: 20px;
            box-sizing: border-box;
            .text-list{
              width: 40%;
              height: 100%;
              padding: 10px 0px;
              li{
                padding: 15px 0;
                box-sizing: border-box;
                border-bottom: 1px solid #f1f1f1;
                span{
                  margin-left: 10px;
                }
              }
            }
            .idCard-box{
              width: 60%;
              height: 100%;
              padding: 10px 20px;
              box-sizing: border-box;
              li{
                width: 100%;
                height: 250px;
                margin: 10px 0;
                background-color: #f1f1f1;
                box-shadow: 1px 1px 2px 1px rgba(0,0,0,.1);
                border-radius: 5px;
                img{
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
            }
          }
        }
      }
    }
  }

</style>
